﻿@model Commission.ViewModels.FileUploadViewModel

@{
    ViewBag.Title = "Home Page";
}

<script type="text/javascript">
    function showImage(fileInput) {
        var files = fileInput.files;
        for (var i = 0; i < files.length; i++) {
            var file = files[i];
            var imageType = /image.*/;
            if (!file.type.match(imageType)) {
                continue;
            }
            var imageDiv = document.getElementById("imageDiv");
            imageDiv.style.display = 'inline';

            var img = document.getElementById("thumbnail");
            img.file = file;
            var reader = new FileReader();
            reader.onload = (function (aImg) {
                return function (e) {
                    aImg.src = e.target.result;
                };
            })(img);
            reader.readAsDataURL(file);
        }
    }
</script>

<h2>Upload File</h2>

<div>
    @using (Html.BeginForm("Upload", "Product", FormMethod.Post, new { enctype = "multipart/form-data" }))
    {
        <input type="File" name="file" id="file" 
               value="Choose File" accept="image/*" onchange="showImage(this)"/>
        <br/>
        <div id="imageDiv" style="display:none">
            <img id="thumbnail" style="width:20%; margin-top:10px;" src="" alt="image" />
            <br />
            <br />
        </div>
        <button type="submit">Upload</button>
    }
</div>
